<template>
  <p>Align Top</p>
  <z-row type="flex" justify="center" align="top">
    <z-col :span="4">
      <p class="height-100">col-4</p>
    </z-col>
    <z-col :span="4">
      <p class="height-50">col-4</p>
    </z-col>
    <z-col :span="4">
      <p class="height-120">col-4</p>
    </z-col>
    <z-col :span="4">
      <p class="height-80">col-4</p>
    </z-col>
  </z-row>

  <p>Align Center</p>
  <z-row type="flex" justify="space-around" align="middle">
    <z-col :span="4">
      <p class="height-100">col-4</p>
    </z-col>
    <z-col :span="4">
      <p class="height-50">col-4</p>
    </z-col>
    <z-col :span="4">
      <p class="height-120">col-4</p>
    </z-col>
    <z-col :span="4">
      <p class="height-80">col-4</p>
    </z-col>
  </z-row>

  <p>Align Bottom</p>
  <z-row type="flex" justify="space-between" align="bottom">
    <z-col :span="4">
      <p class="height-100">col-4</p>
    </z-col>
    <z-col :span="4">
      <p class="height-50">col-4</p>
    </z-col>
    <z-col :span="4">
      <p class="height-120">col-4</p>
    </z-col>
    <z-col :span="4">
      <p class="height-80">col-4</p>
    </z-col>
  </z-row>
</template>

<style lang="less" scoped>
.ant-col {
  color: #fff;
  background: #0080ff;
  p {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.height-120 {
  height: 120px;
  line-height: 100%;
}
.height-100 {
  height: 100px;
}
.height-80 {
  height: 80px;
}
.height-50 {
  height: 50px;
}
</style>
